<script setup lang="ts">
import { touristLogin } from "@/api/use";
import { onMounted, ref } from "vue-demi";
import { getCookie, setCookie } from "@/utils/cookieUtil";
import RecomMusic from "./recom-music/index.vue";
import HotMusic from "./hot-music/index.vue";
import Search from "./search/index.vue";

const tabList = ref([
  { label: "推荐音乐", value: "0" },
  { label: "热歌榜", value: "1" },
  { label: "搜索", value: "2" },
]);
const curIndex = ref(0);

const handleTabClick = (index: number) => {
  curIndex.value = index;
};

onMounted(async () => {
  if (!getCookie("token")) {
    const res = await touristLogin();
    if (res.cookie) {
      setCookie("token", res.cookie, { expires: 7 });
    }
  }
});
</script>

<template>
  <div class="pt-10">
    <nav class="fixed top-0 left-0 right-0 z-20 h-10 flex shadow-md bg-white">
      <div
        v-for="(item, index) in tabList"
        :key="'tab' + index"
        class="flex-1 text-center group"
        :class="curIndex === index ? 'active' : ''"
        @click="handleTabClick(index)"
      >
        <a href="javascript:;" class="tab-item">{{ item.label }}</a>
      </div>
    </nav>
    <main class="main">
      <RecomMusic v-if="curIndex === 0"></RecomMusic>
      <HotMusic v-else-if="curIndex === 1"></HotMusic>
      <Search v-else-if="curIndex === 2"></Search>
    </main>
  </div>
</template>

<style lang="scss" scoped>
.tab-item {
  @apply inline-block h-10 leading-10  px-2 text-sm;
  @apply group-[.active]:text-p-color group-[.active]:border-b-2 group-[.active]:border-b-p-color;
}
</style>
